<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秘密斩杀名单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .kill{
            width: 800px;
            font-family: Arial, Helvetica, sans-serif;
            margin: 0 auto;
            
        }
        .kill .frame{
            width: 600px;
            height: 500px;
            background-color: pink;
        }
        ul{
            list-style-position: inside;
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .kill .frame li span{
            display: inline-block;
            width: 200px;
            height: 40px;
            border: 3px solid red;
            border-radius: 5px;
            color: rgb(253, 166, 166);
            font-size: 25px;
            font-weight: 700;
            /* margin-top: 50px; */
            position: relative;
            top: 41px;
            left: 140px;
            /* cursor: pointer; */
        }
        .kill .frame .kn{
            position: relative;
        }
        .frame .list{
            width: 200px;
            height: 227px;
            border: 1px solid red;
            border-radius: 4px;
            /* position: absolute;
            top: 1px;
            left: 5px; */
            position: absolute;
            top: 66px;
            left: 140px;
            display: none;
            
        }
        .kill .frame .list .name{
            height: 25px;
            border-bottom: 1px solid rgb(253, 166, 166);
            /* background-color: red; */
            text-align: left;
            background: url(../714下拉框练习/714练习.jpg)-2px 0px/25px 25px no-repeat;
            /* display: none; */
        }
        .kill .frame .list li a{
            color: red;
            font-size: 18px;
            padding: 25px;
        }

        .kill .arrow{
            /* display: inline-block; */
            width: 40px;
            height: 40px; 
            background-color: red;
            border-radius:  0 5px 5px 0;
            float: left;
            position: relative;
            top: 41px;
            left: 340px;
        }
        .kill .arrow .up{
            display: inline-block;
            width: 0;
            height: 0;
            border: 12px solid pink;
            border-top-color: red;
            border-left-color: red;
            border-right-color: red;
            /* background-color: white; */
            position: relative;
            top: 0px;
            left: 7px;
            display: none;
            
        }
        .kill .arrow .down{
            /* display: inline-block; */
            width: 0;
            height: 0;
            border: 12px solid pink;
            border-bottom-color: red;
            border-left-color: red;
            border-right-color: red;
            position: relative;
            top: 14px;
            left: 7px;
            /* display: none; */
        }
        

        .kill .frame .kn:hover .list{
            display: block;
        }
        .kill .frame .kn:hover .up{
            display: block;
        }
        .kill .frame .kn:hover .down{
            display: none;
        }
    </style>
</head>
<body>
    <div class="kill">
        <div class="frame">
            
            <ul>
                <li>
                    <a href="http://www.baidu.com" class="kn">
                    <span>斩杀名单</span>
                    <object>
                        <div class="arrow">
                            <div class="down"></div>
                            <div class="up"></div>
                        </div>
                        <div class="list">
                            <ul>
                                <li class="name"><a href="file:///C:/Users/Administrator/Desktop/0.0/%E7%BB%83%E4%B9%A0/714%E4%B8%8B%E6%8B%89%E6%A1%86%E7%BB%83%E4%B9%A0/%E6%9D%80%E4%BA%BA%E5%90%8D%E5%9C%BA%E9%9D%A2.html#" title="已完成任务，斩杀者：罗罗诺亚·索隆">蒙奇·D·路飞</a></li>
                                <li class="name"><a href="file:///C:/Users/Administrator/Desktop/0.0/%E7%BB%83%E4%B9%A0/714%E4%B8%8B%E6%8B%89%E6%A1%86%E7%BB%83%E4%B9%A0/%E6%9D%80%E4%BA%BA%E5%90%8D%E5%9C%BA%E9%9D%A2.html#" title="已完成任务">陈家琳</a></li>
                                <li class="name"><a href="file:///C:/Users/Administrator/Desktop/0.0/%E7%BB%83%E4%B9%A0/714%E4%B8%8B%E6%8B%89%E6%A1%86%E7%BB%83%E4%B9%A0/%E6%9D%80%E4%BA%BA%E5%90%8D%E5%9C%BA%E9%9D%A2.html#" title="已完成任务">侯小胖</a></li>
                                <li class="name"><a href="file:///C:/Users/Administrator/Desktop/0.0/%E7%BB%83%E4%B9%A0/714%E4%B8%8B%E6%8B%89%E6%A1%86%E7%BB%83%E4%B9%A0/%E6%9D%80%E4%BA%BA%E5%90%8D%E5%9C%BA%E9%9D%A2.html#" title="已完成任务">郭亮</a></li>
                                <li class="name"><a href="file:///C:/Users/Administrator/Desktop/0.0/%E7%BB%83%E4%B9%A0/714%E4%B8%8B%E6%8B%89%E6%A1%86%E7%BB%83%E4%B9%A0/%E6%9D%80%E4%BA%BA%E5%90%8D%E5%9C%BA%E9%9D%A2.html#" title="已完成任务">曹林博</a></li>
                                <li class="name"><a href="file:///C:/Users/Administrator/Desktop/0.0/%E7%BB%83%E4%B9%A0/714%E4%B8%8B%E6%8B%89%E6%A1%86%E7%BB%83%E4%B9%A0/%E6%9D%80%E4%BA%BA%E5%90%8D%E5%9C%BA%E9%9D%A2.html#" title="已完成任务">王艳康</a></li>
                                <li class="name"><a href="file:///C:/Users/Administrator/Desktop/0.0/%E7%BB%83%E4%B9%A0/714%E4%B8%8B%E6%8B%89%E6%A1%86%E7%BB%83%E4%B9%A0/%E6%9D%80%E4%BA%BA%E5%90%8D%E5%9C%BA%E9%9D%A2.html#" title="已完成任务">单金广</a></li>
                                <li class="name"><a href="file:///C:/Users/Administrator/Desktop/0.0/%E7%BB%83%E4%B9%A0/714%E4%B8%8B%E6%8B%89%E6%A1%86%E7%BB%83%E4%B9%A0/%E6%9D%80%E4%BA%BA%E5%90%8D%E5%9C%BA%E9%9D%A2.html#" title="已完成任务">郭长帅</a></li>
                                <li class="name"><a href="file:///C:/Users/Administrator/Desktop/0.0/%E7%BB%83%E4%B9%A0/714%E4%B8%8B%E6%8B%89%E6%A1%86%E7%BB%83%E4%B9%A0/%E6%9D%80%E4%BA%BA%E5%90%8D%E5%9C%BA%E9%9D%A2.html#" title="已完成任务">朱闻博</a></li>
                            </ul>
                        </div>
                    </object>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>